<div class="sim">
  <div class="wallpaper">
    <h1 class="title">{{ title }}</h1>
    <h2 class="description">这里收录多达 <b>{{ totalWeb }}</b> 个优质网站， 助您工作、学习和生活</h2>
    <app-search-engine (onSearch)="onSearch($event)"></app-search-engine>
  </div>

  <nav class="top-nav user-select-none">
    <a 
      *ngFor="let item of websiteList; let i = index;" 
      [class.active]="page === i" 
      class="ripple-btn"
      (click)="handleCilckTopNav(i)" 
    >
      {{ item.title }}
    </a>
  </nav>

  <div class="wrapper">
    <nav class="sidebar" id="sidebar">
      <div *ngIf="websiteList[page].nav.length">
        <div 
          *ngFor="let item of websiteList[page].nav; let i = index" 
          (click)="handleSidebarNav(i)" 
          [class.active]="id === i" 
          class="ripple-btn"
        >
          {{ item.title || websiteList[page].title }}
        </div>
      </div>
    </nav>

    <aside class="site-box">
      <app-no-data
        *ngIf="currentList.length && currentList[0].nav && !currentList[0].nav.length"
      >
      </app-no-data>

      <div *ngFor="let item of currentList; let i=index">
        <div class="nav-wrapper">
          <div class="title" *ngIf="item.title" (click)="onCollapse(item, i)">
            {{ item.title }} x {{ item.nav.length }}

            <i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="item.collapsed"></i>
          </div>

          <ul class="ul" *ngIf="!item.collapsed">
            <li *ngFor="let ele of item.nav">
              <a class="url-box" [href]="ele.url" target="_blank" rel="noopener noreferer">
                <div class="box-wrapper">
                  <div class="left">
                    <img
                      *ngIf="ele.icon || item.icon || websiteList[page].nav[id].icon; else icon"
                      [src]="ele.icon || item.icon || websiteList[page].nav[id].icon"
                      class="icon"
                      (error)="onImgError($event)"
                    >
                    <ng-template #icon>
                      <span class="icon"></span>
                    </ng-template>
                  </div>
  
                  <div class="right" [innerHtml]="ele.name"></div>
                </div>

                <div class="desc" [innerHtml]="ele.desc"></div>
              </a>

              <div class="mark" *ngIf="ele.language && ele.language.length > 0">
                <div class="button-box">
                  <a 
                    [href]="ele.language[0]" 
                    class="zh" 
                    target="_blank" 
                    *ngIf="ele.language[0]" 
                    rel="noopener noreferer"
                  >
                    {{ language[0] }}
                  </a>
                  <a 
                    [href]="ele.language[1]" 
                    class="zh" 
                    target="_blank" 
                    *ngIf="ele.language[1]" 
                    rel="noopener noreferer"
                  >
                    {{ language[1] }}
                  </a>
                  <a 
                    [href]="ele.language[2]" 
                    class="zh" 
                    target="_blank" 
                    *ngIf="ele.language[2]" 
                    rel="noopener noreferer"
                  >
                    {{ language[2] }}
                  </a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </aside>
  </div>
</div>

<app-footer className="sim-footer"></app-footer>
<app-fixbar
  (onCollapse)="onCollapseAll()"
  [collapsed]="websiteList[page].nav[id].collapsed"
>
</app-fixbar>

<div class="sim-bg"></div>
